<!--歌手详情-->
<template>
  <div class='content-view'>
    <el-backtop/>
    <div class="top">
      <div class="img">
        <!--这里要计算出当天时间-->

        <img v-show="artistInfo?.picUrl.length>0" :src="artistInfo?.picUrl" alt="">
      </div>
      <div class="info">
        <div class="label">
          <span class="font-weight">{{ artistInfo?.name }}</span>
        </div>
        <div class="alias">
          <span v-for="(v,i) in  artistInfo?.alias">{{ i === 0 ? v : '、' + v }}</span>
        </div>
        <div class="control">
          <!--  收藏-->
          <button
              class="white-btn"
              @click="handleSub">
            <i v-if="isSub" class="iconfont icon-xihuan"></i>
            <i v-else>
              <el-icon>
                <CirclePlus/>
              </el-icon>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </i>

            <span>{{ isSub ? '已收藏' : '收藏' }}</span>
          </button>
          <!--          个人主页-->
<!--          <button v-if="userId" class="white-btn" @click='toPersonal'>-->
<!--            <i class="iconfont icon-link"></i>-->
<!--            个人主页-->
<!--          </button>-->

        </div>
        <div class="attribute">
          <span v-show=" artistInfo?.musicSize">单曲数：{{ artistInfo?.musicSize }} </span>
          <span v-show=" artistInfo?.albumSize">专辑数：{{ artistInfo?.albumSize }}</span>
          <span  v-show=" artistInfo?.mvSize">mv数：{{ artistInfo?.mvSize }}</span>
        </div>
      </div>
    </div>

    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="clickTab">
        <el-tab-pane :name="1" label="专辑">
          <div
              v-for="(v,i) in albumList"
              v-show="v?.songs.length>0"
              :key="v?.id"
              class="ranking-card"
          >
            <!--封面-->
            <div class="img" @click="jumpDetail(v.id)">
              <el-image style="border-radius: 8px;" :src="v?.picUrl " alt="" /></div>
            <!--歌曲列表-->
            <div class="song-list">
              <div class="label">{{ v.name }}</div>

              <ul>
                <li
                    v-for="(v2 ,i2) in v.songs"
                    v-show="moreShow&&i===0?true:i2<10"
                    :tabindex="v2.id"
                    @dblclick="changeSong(v2,v.id,v.songs)">
                  <div class="list-left">
                    <span class="index">{{ i2 + 1 }}</span>
                    <span class="song-name">{{ v2?.name }}</span>
                    <i v-if="v2.fee===1" class="tag vip-tag">VIP</i>
                    <i v-if="v2.mv!==0" class="tag mv-tag">MV</i>
                    <i v-if="v2?.sq" class="tag mv-tag">SQ</i>

                  </div>
                  <div class="list-right">
                    <span>{{ useDurationFormat(v2.dt) }}</span>
                  </div>
                </li>
              </ul>
              <div v-show="i===0&&v.songs.length>10&&!moreShow?true:(i!==0&&v.songs.length>10)" class="more"
                   @click="jumpDetail(v.id,i)">查看全部
                <i class="iconfont icon-arrow-right-bold"></i></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :name="2" label="MV" />
        <el-tab-pane :name="3" label="歌手详情">
          <DescriptionTab :description="description"></DescriptionTab>
        </el-tab-pane>
      </el-tabs>
      <MvTab v-if="activeName==2"></MvTab>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, reactive} from "vue"
import {CirclePlus} from "@element-plus/icons-vue"
import {useRoute, useRouter} from "vue-router";
import {PlaylistInfo} from "@/types/playlist.d.ts";
import {useUser} from '@/store/user'
import {useSong} from '@/store/song'

//新写的
import {albumDetail, artistAlbum} from '@/api/album/index.ts'
import {artistDetail, topSong} from '@/api/artist/index.ts'
import {SongInfo} from "@/types/song";
import topSongsLogo from '@/assets/img/topSongsLogo.png'
import {useDurationFormat} from '@/hooks/useDurationFormat.ts'
import {artistSublist, artistMv, artistSub} from "@/api/artist";
import MvTab from '@/views/artistDetail/components/MvTab.vue'
import DescriptionTab from '@/views/artistDetail/components/DescriptionTab.vue'
import {artistDesc} from "../../api/artist";
//变量
const router = useRouter()
const route = useRoute()
const userStore = useUser() //创建store
const songStore = useSong() //创建store
let loading =ref(false)
const activeName = ref(1)
const playlistDetail = ref<PlaylistInfo>({
  id: Number(route.query.id), //歌单id
  coverImgUrl: '',
  createTime: 0,
  trackCount: 0,
  description: '',
  creator: {},
  tags: [],
  subscribed: false//歌单是否被收藏
})
let isSub = ref(false) //歌手是否被收藏


//新写的
let artistInfo = ref() //歌手信息
let albumList = ref<PlaylistInfo[]>([
  {
    name: '热门50首',
    picUrl: topSongsLogo,
    songs: []
  }
]) //歌手专辑
let artistSubQuery = reactive({ //收藏/取消收藏歌手请求参数
  id: 0,
  t: 1 //1是收藏 0是取消收藏
})
let description = reactive({ //歌手描述
  briefDesc: '',//主要简介
  introduction: [],//各种经历成就
})


//方法

//点击创建者跳转个人页
const toPersonal = () => {
  router.push({
    name: 'personal',
    query: {
      uid: userId.value
    }
  })
}


//新代码
//获取歌手详情
let userId = ref(null) //入驻艺人
const getAristDetail = () => {
  artistInfo.value = JSON.parse(route.query.info)

  userId.value   = artistInfo.value.id

  setTimeout(() => {
    getTopSong()
    getArtistSublist()
    getAlbum()
    getDesc()
  }, 0)
  console.log('歌手信息',artistInfo.value)
  //接口变了
  // if (route.query.id) {
  //   artistDetail({id: route.query.id}).then((res: any) => {
  //     if (res.code === 200) {
  //       artistInfo.value = res.data.artist
  //       mvQuery.id = artistInfo.value.id
  //       console.log('歌手详情信息', res)
  //       if (res.data.user?.userId) {
  //         userId.value = res.data.user.userId
  //       }
  //       getTopSong()
  //       getArtistSublist()
  //     }
  //   })
  // }
}
getAristDetail()
//获得歌手描述
const getDesc = () => {
  artistDesc({id: artistInfo.value.id}).then((res: any) => {
    if (res.code === 200) {
      description.briefDesc = res.briefDesc
      description.introduction = res.introduction
    }
  })
}
//获取歌手热门50首
const getTopSong = () => {
  topSong({id: artistInfo.value.id}).then((res: any) => {
    if (res.code === 200) {
      albumList.value[0].songs = res.songs
    }
  })
}
//获得歌手专辑
const getAlbum = () => {
  artistAlbum({id: artistInfo.value.id}).then((res: any) => {
    if (res.code === 200) {
      albumList.value.push(...res.hotAlbums)
      getSongs()
    }
  })
}
//获取歌手每个专辑中的歌曲
const getSongs = () => {
  albumList.value!.forEach((v: PlaylistInfo, i: number) => {
    if (i !== 0) {
      albumDetail({id: v.id}).then((res: any) => {
        if (res.code === 200) {
          v.songs = res.songs
        }
      })
    }

  })
}
//跳转到歌单详情页
let moreShow = ref(false)
const jumpDetail = (id: number, i: number) => {
  //非50首热门歌曲才可以跳转
  if (i !== 0) {
    router.push({
      name: 'albumDetail',
      query: {
        id
      }
    })
  } else {
    moreShow.value = true
  }
}

//切换歌曲
const changeSong = (row: SongInfo, id: number, songs: any) => {
  songStore.currentSong = row
  // 若歌单id变化，则表示播放的其他歌单的歌，替换全部播放列表
  if (songStore.playListId !== id) {
    songStore.playList = songs
  }
}

//获取收藏的歌手列表
const getArtistSublist = () => {
  artistSublist().then((res: any) => {
    if (res.code === 200) {
      isSub.value = res.data.some((v: any) => v.id === artistInfo.value.id)
    }
  })
}
//收藏/取消收藏歌手
const handleSub = () => {
  artistSubQuery.id = artistInfo.value.id
  artistSubQuery.t = isSub.value ? 0 : 1
  artistSub(artistSubQuery).then((res: any) => {
    if (res.code === 200) {
      isSub.value = !isSub.value
    }
  })
}



</script>

<style lang="less" scoped>
//最外层容器不要滚动的页面样式(mv部分要做无线滚动)

.content-view {
  height: calc(100% - 60px);
  overflow-x: hidden;

}

.top {
  display: flex;

  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .label {
      display: flex;
      //margin-top: 20px;
    }

    .alias {
      color: @fontColor2;
      font-size: 13px;
      margin-top: 10px;
    }

    .attribute {
      display: flex;
      color: @fontColor2;
      font-size: 13px;
      font-weight: 400;
      line-height: 20px;
      margin-top: 10px;

      .description {
        .long-text;
        width: 700px;
      }

      span {
        margin-right: 20px;
      }
    }

    .font-weight {
      font-size: 24px;
    }
  }

  .img {
    min-width: 180px;

    width: 180px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden!important;
    margin-right: 10px;

    .el-image {
      width: auto;
      margin-left: -20px;
    }
  }

}

.control {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;

  .white-btn {
    .el-icon {
      font-size: 18px;
      position: absolute;
      color: #979797;
    }


  }

}

.el-tabs {
  left: 0px;
  top: 10px;
  padding-top: 10px;
  position: relative;
  background-color: #fff;
  width: 100%;
  z-index: 999;
}

:deep(.el-tabs__item.is-active) {
  .font-weight
}

:deep(.el-tabs__item) {
  font-size: 16px;
  color: @fontColor;
}

/*去掉tabs底部的下划线*/
:deep(.el-tabs__nav-wrap:after) {
  position: static !important;
}

:deep(.el-tabs__active-bar) {
  transition: none;
  height: 3px;
}

:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__content) {
  margin-top: 30px; //内容顶部高度！
}

.ranking-card {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 50px;

  height: auto;

  .img {
    width: 185px;
    height: 185px;
    margin-right: 30px;
    cursor: pointer;

    img {
      width: 185px;
      height: 185px;
      border-radius: 8px;
    }

  }

  .song-list {
    height: 100%;
    width: 100%;

    .label {
      font-weight: 700;
      font-size: 20px;
      margin-bottom: 15px;
    }

    ul {
      border-radius: 8px;

      li {
        cursor: pointer;
        display: flex;
        line-height: 37px;
        font-size: 14px;
        height: 37px;
        justify-content: space-between;
        color: @lightFontColor;
        padding: 0 20px;

        .index {
          margin-right: 12px;
        }

        .song-name {
          color: @fontColor;
          margin-right: 10px;
          .long-text;
        }
      }

      li:nth-child(odd) {
        background-color: @shallowTheme;
      }

      li:hover {
        background-color: @pink;
      }

      li:focus {
        background-color: @pink;
      }
    }

    .more {
      width: 90px;
      cursor: pointer;
      margin-top: 6px;
      color: @lightFontColor;
      font-size: 14px;
    }
  }
}

</style>